<template>
	<view class="invite_merchant">
		<view class="invite_merchant_imgs">
			<canvas canvas-id="poster" id="poster" :style="{width: `${canvasWidth}px`, height: `${canvasHeight}px`}"
				class="poster"></canvas>
		</view>
		<view class="invite_merchant_btm safe_area">
			<view class="invite_merchant_btm_view">
				<button class="invite_merchant_btm_view_item btn_style" open-type="share">
					<image :src="getimageUrl('weixinhaoyou.png')" class="invite_merchant_btm_view_item_img"></image>
					<text class="invite_merchant_btm_view_item_text">发送给微信好友</text>
				</button>
				<view class="invite_merchant_btm_view_item" @click="handleDownload">
					<image :src="getimageUrl('haibao.png')" class="invite_merchant_btm_view_item_img"></image>
					<text class="invite_merchant_btm_view_item_text">下载分享海报</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { getimageUrl } from '@/util/util.js';
	import { onMounted, ref, unref, getCurrentInstance, toRaw } from 'vue';
	import { onShareAppMessage } from "@dcloudio/uni-app";
	import { queryShareQRCode } from '@/common/mine.api';

	const canvasWidth = ref(0);
	const canvasHeight = ref(0);
	const filePath = ref();
	const { proxy } = getCurrentInstance();

	/**
	 * 分享
	 */
	onShareAppMessage(async (res) => {
		return {
			title: '分享',
			path: "/pages/index/index" + uni.$u.queryParams({ masterId: toRaw(proxy['vuex_user'])?.id }),
		}
	})

	onMounted(async () => {
		const systemInfo = uni.getSystemInfoSync();
		canvasWidth.value = systemInfo.windowWidth * 0.78;
		canvasHeight.value = systemInfo.windowHeight * 0.779;
		const res = await queryShareQRCode({ page: 'pages/index/index', scene: `masterId=${toRaw(proxy['vuex_user'])?.id}` });
		const context = uni.createCanvasContext('poster', this);
		const codeSize = unref(canvasWidth) * 0.9;
		context.drawImage('/static/images/poster.png', 0, 0, unref(canvasWidth), unref(canvasHeight));
		//#ifdef MP-WEIXIN
		if (__wxConfig.envVersion === 'release') {
			context.drawImage(res, unref(canvasWidth) * 0.69, unref(canvasHeight) * 0.8, codeSize, codeSize);
		} else if (__wxConfig.envVersion === 'develop') {
			context.drawImage('/static/images/qrCode.jpg', unref(canvasWidth) * 0.05, unref(canvasHeight) * 0.475, codeSize, codeSize);
		} else {
			context.drawImage('/static/images/qrCode.jpg', unref(canvasWidth) * 0.69, unref(canvasHeight) * 0.8, codeSize, codeSize);
		}
		// #endif
		context.restore()
		context.draw();
		uni.canvasToTempFilePath({
			canvasId: 'poster',
			success: function (res) {
				filePath.value = res.tempFilePath;
			},
			fail(err) {
				console.log(err);
			}
		}, this)
	})




	/**
	 * 海报
	 */
	async function handleDownload() {
		uni.saveImageToPhotosAlbum({
			filePath: unref(filePath),
			success: function () {
				uni.showToast({
					title: '海报已保存相册，快去朋友圈分享吧'
				});
			},
			fail: function (err) {
				uni.showToast({
					title: '保存相册失败',
					icon: 'none'
				});
			}
		});
	}
</script>

<style lang="scss" scoped>
	.poster {
		margin: 0 auto;
	}

	.invite_merchant_btm {
		background-color: #fff;
		border-radius: 12px 12px 0px 0px;

	}

	.invite_merchant_btm_view {
		padding: 33rpx 118rpx 42rpx 118rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 26rpx;

		.invite_merchant_btm_view_item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: column;
			height: 156rpx;

			.invite_merchant_btm_view_item_img {
				width: 144rpx;
				height: 144rpx;
			}

			.invite_merchant_btm_view_item_text {
				font-size: 28rpx;
				line-height: 28rpx;
			}
		}
	}
</style>